<template>
  <!-- 顶部导航栏 -->
  <el-header>
    <div class="header-content">
      <el-input
          v-model="searchForm.title"
          placeholder="搜索标题或者内容"
          class="search-input"
      />
      <el-button type="primary" @click="searchTalk">搜索</el-button>
      <el-button @click="resetCourse">重置</el-button>
    </div>
  </el-header>
  <div class="container">
    <el-button type="primary" @click="addTalk" class="custom-button">发布帖子</el-button>
  </div>
  <div class="post-list">
    <!-- 遍历当前页的帖子 -->
    <div v-for="(post, index) in tableData" :key="post.id" @click="talkDetailClick(post.id)" class="post-item">
      <!-- 帖子标题 -->
      <h2 class="post-title">{{ post.title }}</h2>
      <div class="container">
        <!-- 图片展示在左边 -->
        <img v-if="post.imageUrl" :src="post.imageUrl" alt="图片" class="image" />
        <!-- 文字展示在右边 -->
        <div class="text" v-html="post.truncatedText"></div>
      </div>
      <!-- 分割线 -->
      <el-divider v-if="index < tableData.length - 1" />
    </div>
  </div>
  <!-- 分页 -->
  <el-pagination style="margin-top:20px"
                 :current-page="searchForm.pageNum"
                 :page-size="searchForm.pageSize"
                 :page-sizes="[2,4,6,8]" layout="->,total, sizes, prev, pager, next, jumper"
                 :total="total"
                 @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>

<script setup>
import {computed, onMounted, reactive, ref} from "vue";
import talkAPI from "@/api/module/talk";
import router from "@/router/index";
import image from "@/utils/image";

// 讨论区list数据
let tableData = ref([]);
let total = ref(0);

// Dom 挂载之后
onMounted(() => {
  getTalkList();
})

// 搜索条件
const searchForm = reactive({
  title:'',
  pageNum: 1,
  pageSize: 2,
})

//根据title过滤课程
const getTalkList = async () => {
  const res = await talkAPI.page(searchForm);
  tableData.value = res.data.records;
  total.value = res.data.total;
  tableData.value.forEach((content) => {
    // 提取第一张图片的 URL
    const contentNew = content.content || ''; // 确保 content 是字符串
    const imgRegex = /<img[^>]+src="([^">]+)"/;
    const match = contentNew.match(imgRegex);
    const imageUrl = match ? match[1] : '';
    // 去除图片标签，保留纯文本
    const textWithoutImages = contentNew.replace(/<img[^>]*>/g, '');
    // 保留 3 行文字
    const lines = textWithoutImages.split('</p>').slice(0, 3);
    const truncatedText = lines.join('</p>') + (lines.length < 3 ? '' : '...');
    content.imageUrl = imageUrl;
    content.truncatedText = truncatedText;
  })
}

const handleSizeChange = (size) => {
  if(searchForm.courseType === 'all'){
    searchForm.courseType = null;
  }
  searchForm.pageSize = size;
  getTalkList();
}
const handleCurrentChange = (current) => {
  if(searchForm.courseType === 'all'){
    searchForm.courseType = null;
  }
  searchForm.pageNum = current;
  getTalkList();
}

//跳转详情页面
const talkDetailClick =  (id) => {
  router.push({
    path:'/talkDetail/' + Date.now(),
    query:{
      "id": id
    }
  });
}

//跳转页面
const addTalk =  () => {
  router.push({
    path:'/create',
  });
}

//查询
const searchTalk = () => {
  searchForm.pageNum = 1;
  getTalkList();
}
//重置
const resetCourse = () => {
  searchForm.title = '';
  searchForm.current = 1;
  getTalkList();
}
</script>

<style scoped>
.post-list {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.post-item {
  margin-bottom: 20px;
}

.post-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #1a1a1a;
}

.post-content-wrapper {
  display: flex;
  align-items: flex-start;
}

.post-image {
  width: 150px;
  height: 100px;
  object-fit: cover;
  margin-right: 15px;
  border-radius: 4px;
}

.post-content {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制显示 3 行 */
  -webkit-box-orient: vertical;
  flex: 1;
}

.el-divider {
  margin: 20px 0;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}

.container {
  display: flex;
  justify-content: flex-end; /* 将按钮推到右边 */
}

.custom-button {
  background-color: #409eff; /* 设置背景色 */
  color: white; /* 设置字体颜色 */
  border: none; /* 去掉边框 */
  padding: 10px 20px; /* 调整内边距 */
  border-radius: 5px; /* 添加圆角 */
  font-size: 16px; /* 设置字体大小 */
  cursor: pointer; /* 鼠标悬停时显示手型 */
  transition: background-color 0.3s ease; /* 添加背景色过渡效果 */
}

.custom-button:hover {
  background-color: #80c7ff; /* 鼠标悬停时的背景色 */
}

.search-input {/* 页面导航栏 */
  width: 1000px;
  margin-right: 20px;
}

/* 容器布局 */
.container {
  display: flex;
  align-items: flex-start;
  gap: 16px; /* 图片和文字之间的间距 */
}

/* 图片样式 */
.image {
  width: 150px; /* 图片宽度 */
  height: 150px; /* 高度自适应 */
  border-radius: 8px; /* 圆角 */
}

/* 文字样式 */
.text {
  flex: 1; /* 占据剩余空间 */
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制为 3 行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>